<template>
	<!-- 我的个人信息展示模块 -->
	<view class="moduleBox">
		<view class="">
			<view class="infoBox" v-if="token == -1">
				<view class="infoLeft"><image :src="`${baseUrl}/static/logo.png`" style="width: 160rpx;height: 160rpx;border-radius: 50%;"></image></view>
				<view class="infoRight"><view class="infoRightName" @click="toLogin">点击去登录</view></view>
			</view>
			<view class="infoBox" v-if="token && token != -1">
				<view class="infoLeft" @click="changeHeader"><image :src="headInfo.avatar_image" style="width: 160rpx;height: 160rpx;border-radius: 50%;"></image></view>
				<view class="infoRight">
					<view class="infoRightName">{{headInfo.nick_name || ''}}</view>
					<view class="infoRightPhone" v-if="headInfo.phone">
						<u-icon name="phone" color="#000" size="28"></u-icon>
						{{headInfo.phone}}
					</view>
					<view class="infoRightVIP" v-if="headInfo.identity_text">
						<view class="vipImageBox">
							<view class="imageBox"><image :src="`${baseUrl}/static/my/vip01.png`" style="width: 48rpx;height:48rpx;"></image></view>
							<view class="vipName">{{headInfo.identity_text || ''}}</view>
						</view>
						<!-- <view style="display: flex;align-items: flex-end;"><uni-icons type="info" color="#000" size="22" @click="showVip = true"></uni-icons></view> -->
						<!-- <view class="btnBox" v-if="headInfo.identity == 3"><view class="btn" hover-class="hoverBtn" @click="toApplyArea">申请场地<uni-icons type="right" size="14"></uni-icons></view></view> -->
					</view>
				</view>
			</view>
			<view class="accountBox" v-if="token && token != -1">
				<view class="accountNum">账号：{{headInfo.account || ''}}</view>
				<view class="accountBtn" hover-class="btnHover" @click="copy">复制</view>
			</view>
		</view>
		<view class="renzheng" v-if="token && token != -1">
			<view class="text" @click="changeHeader">
				<image :src="`${baseUrl}/static/my/icon23.png`" style="width: 46rpx;height: 46rpx;"></image>
			</view>
		</view>
		<!-- 身份说明 -->
		<!-- <my-explainPopup :show="showVip" dataTitle="身份说明" :dataDetail="headInfo.identity_content" @click="showVip = false"></my-explainPopup> -->
	</view>
</template>

<script>
	import { isLogin } from "../../mixins/isLogin.js"
	export default {
		name:"my-headInfo",
		mixins:[isLogin],
		data() {
			return {
				baseUrl:this.$baseUrl,
				headImage:'',
				show1:false,
				// 身份
				showVip:false,
				// 是否展示推荐码
				showQrcode:false
			};
		},
		props:{
			headInfo:{
				type:Object,
				default:{}
			},
			token:{
				default:''
			}
		},
		methods:{
			// 改变头像
			changeHeader(){
				let token = uni.getStorageSync('token') || 0;
				if(token){
					uni.navigateTo({
						url:"/pages/index/auth/nickName"
					})
				}else{
					this.toLogin()
				}
			},
			// 复制
			copy(){
				uni.setClipboardData({
					data:this.headInfo.account
				})
				// this.showQrcode = true;
			},
			// 前往认证页面
			toApprove(){
				uni.navigateTo({
					url:"/pagesMy/approve/approve"
				})
			},
			// 前往升级页面
			toVipPage(){
				uni.navigateTo({
					url:"/pagesMy/vipPage/vipPage"
				})
			},
			toPvmPage(){
				uni.navigateTo({
					url:"/pagesMy/pvmPage/pvmPage"
				})
			},
			toPhone(){
				uni.navigateTo({
					url:"/pages/index/auth/wxPhone"
				})
			},
			toDocument(){
				uni.navigateTo({
					url:"/pagesShare/document/document?id=5"
				})
			},
			toApplyArea(){
				if(this.headInfo.center_apply == -1 || this.headInfo.center_apply == 2){
					uni.navigateTo({
						url:"/pagesMy/applyArea/applyArea"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.moduleBox{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.accountBox{
		color: #000;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		.accountBtn{
			margin-left: 12rpx;
		}
		.btnHover{
			color: #777;
		}
	}
	.infoBox{
		// width: calc(100% - 126rpx);
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
		.infoLeft{
			font-size: 0;
			margin-right: 16rpx;
			flex-shrink: 0;
			position: relative;
			.changeImage{
				position: absolute;
				right: -6rpx;
				bottom: -10rpx;
				z-index: 888;
			}
		}
		.infoRight{
			display: flex;
			flex-direction: column;
			justify-content: center;
			.infoRightName{
				color: #000;
				font-size: 34rpx;
				font-weight: 600;
				margin-right: 12rpx;
				display: flex;
				align-items: center;
			}
			.infoRightPhone{
				font-weight: 400;
				font-size: 26rpx;
				color: #000;
				margin: 4rpx 0;
				vertical-align: middle;
				display: flex;
				align-items: center;
			}
			.infoRightVIP{
				font-size: 0%;
				display: flex;
				align-items: flex-end;
				.vipImageBox{
					min-width: 112rpx;
					height: 48rpx;
					margin-right: 8rpx;
					position: relative;
					display: flex;
					align-items: flex-end;
					.imageBox{
						font-size: 0%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-shrink: 0;
						position: absolute;
						left: 0;
						bottom: 0rpx;
						z-index: 999;
					}
					.vipName{
						height: 32rpx;
						font-weight: 600;
						font-size: 22rpx;
						color: #663409;
						background-color: #ffecb5;
						border: 2rpx solid #c8a161;
						border-radius: 8rpx;
						padding: 0%;
						padding-left: 36rpx;
						padding-right: 16rpx;
						margin-left: 16rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						position: relative;
						top: -8rpx;
						z-index: 888;
					}
				}
				.btnBox{
					position: relative;
					bottom: 0rpx;
					.btn{
						font-weight: 600;
						font-size: 22rpx;
						color: #663409;
						background-color: #ffecb5;
						border: 2rpx solid #c8a161;
						border-radius: 8rpx;
						padding-left: 10rpx;
						margin-left: 16rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						
					}
					.hoverBtn{
						background-color: #c8a161;
					}
				}
			}
		}
	}
	.renzheng{
		color: #000;
		font-size: 24rpx;
		font-weight: 600;
		background: #fff;
		border-radius: 26rpx;
		text-align: center;
		padding: 12rpx;
		flex-shrink: 0;
		.text{
			display: flex;
			align-items: center;
		}
	}
}
</style>